<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <input type="text" v-model="preson.name" placeholder="姓名">
  <input type="text" v-model="preson.sal" placeholder="工资">
  <input type="text" v-model="preson.job" placeholder="工作">
  <input type="button" @click="add()" value="添加">
  <el-table
          :data="arr"
          style="width: 100%">
    <el-table-column
            type="index"
            label="编号">
    </el-table-column>
    <el-table-column
            prop="name"
            label="名字"
            width="180">
    </el-table-column>
    <el-table-column
            prop="sal"
            label="工资"
            width="180">
    </el-table-column>
    <el-table-column
            prop="job"
            label="工作">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v=new Vue({
    el: '#app',
    data: function() {
      return {
        preson:{name:"", sal:"", job:""},
        arr:[]
      }
    },
    methods:{
      add(){
        v.arr.push({name:v.preson.name,sal:v.preson.sal,job:v.preson.job})
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index,name){
        v.arr.splice(index,1);
        v.$message("删除"+name.name)
      }
    }

  })
</script>
</html>